{% extends 'base.html' %}
{% load staticfiles %}
{% block content %}
<!------------------游记版头-------------------->
<div id="note_head">
	<div class="head">
        <img src="{{ MEDIA_URL }}{{ diary.image }}" style="width:100%; height:100%;"/>
		<div class="banner"></div>
		<div class="title">
			<div class="cw1200"><p>{{ diary.title }}</p></div>
			<span><img src="{% static 'images/eye_ico.png' %}"/>{{ diary.checknum }}</span>
		</div>
	</div>
	<div class="user">
		<div class="cw1200">
			<div class="pic"><img src="{{ MEDIA_URL }}{{ diary.user.portrait }}"/></div>
			<div class="meta">
				<label>作者：{{ diary.user.nickname }}。</label>
				<span>发布于：{{ diary.add_times }}</span>
			</div>
            <script type="text/javascript">
                function operation(opertype, diary_id)
                    {
                         $.ajaxSetup({headers: {"X-CSRFToken": '{{ csrf_token }}'}});
                         if(opertype === 'fav'){$.ajax({
                             type: "POST",
                             data: {'id': diary_id},
                             url: '{% url 'operation:fav' %}',
                             cache: false,
                             dataType: "json",
                             success:function (data) {
                                 if(data.status === "fav"){
                                     $(".favimg").attr("src", "{% static 'images/favour_ico2.png' %}");
                                     {#局部刷新#}
                                     $(".fav").load(location.href + " .fav");
                                 }
                                 else
                                 {
                                     $(".favimg").attr("src", "{% static 'images/favour_ico.png' %}");
                                     $(".fav").load(location.href + " .fav");
                                 }
                             },
                             error:function (){
                                 alert('error')
                             },
                        });}
                         else {$.ajax({
                             type: "POST",
                             data: {'id': diary_id},
                             url: '{% url 'operation:collect' %}',
                             cache: false,
                             dataType: "json",
                             success:function (data) {
                                 if(data.status === "coll"){
                                     $(".collimg").attr("src", "{% static 'images/collection_ico2.png' %}");
                                     {#局部刷新#}
                                     $(".coll").load(location.href + " .coll");
                                 }
                                 else
                                 {
                                     $(".collimg").attr("src", "{% static 'images/collection_ico.png' %}");
                                     $(".coll").load(location.href + " .coll");
                                 }
                             },
                             error:function (){
                                 alert('error')
                             },
                        });}
                    }
        </script>
			<div class="operation">
				<a href="javascript:void(0);" onclick="operation('fav',{{ diary.id }})">
                    <div class="fav">
                        <img class="favimg" src="{% if hasfav %}
                        {% static 'images/favour_ico2.png' %}{% else %}{% static 'images/favour_ico.png' %}
                        {% endif %}"/>
                        <p>{{ diary.praisenum }}个赞</p>
                    </div>
				</a>
				<a href="javascript:void(0);" onclick="operation('coll',{{ diary.id }})">
                    <div class="coll">
                        <img class="collimg" src="{% if hascoll %}
                            {% static 'images/collection_ico2.png' %}{% else %}{% static 'images/collection_ico.png' %}
                            {% endif %}"/>
                        <p>{{ diary.collectnum }}个收藏</p>
                    </div>
				</a>
			</div>
		</div>
	</div>
</div>
<!------------------子页框架-------------------->
<div id="sub_from">
    <div class="cw1200">
		<div class="w810 fl">
			<!------------------公共盒子-------------------->
			<div class="public_box bg1">
				<div class="public_title">
					<div class="fl"><img src="{% static 'images/from_title_left.png' %}"/></div>
					<div class="con">
						<div class="lamp_ico"><img src="{% static 'images/lamp_ico.png' %}"/></div>
						<div class="name"><img src="{% static 'images/f_t_article.png' %}"/></div>
					</div>
					<div class="fr"><img src="{% static 'images/from_title_right.png' %}"/></div>
					<div class="clear"></div>
				</div>
				<!------------------文章-------------------->
				<div id="article">

					<div class="con">
						{% autoescape off %}{{ diary.content }}{% endautoescape %}
					</div>
				</div>

			</div>
			<!------------------公共盒子-------------------->
			<div class="public_box bg1">
				<div class="public_title">
					<div class="fl"><img src="{% static 'images/from_title_left.png' %}"/></div>
					<div class="con">
						<div class="lamp_ico"><img src="{% static 'images/lamp_ico.png' %}"/></div>
						<div class="name"><img src="{% static 'images/f_t_comment.png' %}"/></div>
					</div>
					<div class="fr"><img src="{% static 'images/from_title_right.png' %}"/></div>
					<div class="clear"></div>
				</div>
				<!------------------评论-------------------->


				<div id="comment">
					<div class="release">
						<img src="{{ MEDIA_URL }}{{ request.user.portrait }}"/>
                        <form method="post" action="{% url 'operation:comments' %}">
                        <input name="diaryid" value="{{ diary.id }}" hidden/>
						<input class="text" type="text" name="comment" placeholder="说说你的看法..."/>
                        {% csrf_token %}
						<input class="submit" type="submit" value="发表"/>
                        </form>
						<div class="clear"></div>
					</div>
					<div class="list">
						<div class="tag">


                            <script>
                                function newComments() {
                                    $("#commentlist").html('{% for comm_diary in comm_diarys %}<li>'+
                                        '<div class="pic"><img src="{{ MEDIA_URL }}{{ comm_diary.user.portrait }}"/></div>'
                                        + '<div class="con"><label>{{ comm_diary.user.nickname }}</label>'
                                        + '<p>{{ comm_diary.comments }}</p>'
                                        + '<span>发表于：{{ comm_diary.add_time|date:"Y-m-d H:i"  }}</span>'
                                        + '</div><div class="tip">{% if forloop.revcounter == 1 %}' +
                                        '<span class="t_a t_box">沙发</span>{% elif forloop.revcounter == 2 %}<span class="t_b t_box">板凳</span>'
                                        + '{% elif forloop.revcounter == 3 %}<span class="t_c t_box">地板</span>{% else %}'
                                        + '<span>{{ forloop.revcounter }}#</span>{% endif %}</div></li>{% endfor %}')

                                    $("#ordercomment").removeClass()
                                    $("#newcomment").removeClass()
                                    $("#newcomment").addClass('cur')
                                }

                                function order() {
                                    $("#commentlist").html('{% for comm_diary in comm_diarys reversed %}<li>'+
                                        '<div class="pic"><img src="{{ MEDIA_URL }}{{ comm_diary.user.portrait }}"/></div>'
                                        + '<div class="con"><label>{{ comm_diary.user.nickname }}</label>'
                                        + '<p>{{ comm_diary.comments }}</p>'
                                        + '<span>发表于：{{ comm_diary.add_time|date:"Y-m-d H:i"  }}</span>'
                                        + '</div><div class="tip">{% if forloop.counter == 1 %}' +
                                        '<span class="t_a t_box">沙发</span>{% elif forloop.counter == 2 %}<span class="t_b t_box">板凳</span>'
                                        + '{% elif forloop.counter == 3 %}<span class="t_c t_box">地板</span>{% else %}'
                                        + '<span>{{ forloop.counter }}#</span>{% endif %}</div></li>{% endfor %}')

                                    $("#ordercomment").removeClass()
                                    $("#newcomment").removeClass()
                                    $("#ordercomment").addClass('cur')
                                }


                            </script>

							<a class="cur" id="newcomment" href="javascript:void(0);" onclick="newComments()">最新评论</a>
                            <span>|</span>
                            <a  id="ordercomment" href="javascript:void(0);" onclick="order()">正序排列</a>
						</div>
						<ul id="commentlist">
                            {% for comm_diary in comm_diarys %}
                            <li>
								<div class="pic"><img src="{{ MEDIA_URL }}{{ comm_diary.user.portrait }}"/></div>
								<div class="con">
									<label>{{ comm_diary.user.nickname }}</label>
									<p>{{ comm_diary.comments }}</p>
									<span>发表于：{{ comm_diary.add_time|date:"Y-m-d H:i"  }}</span>
								</div>
								<div class="tip">
                                    {% if forloop.revcounter == 1 %}
								        <span class="t_a t_box">沙发</span>
                                    {% elif forloop.revcounter == 2 %}
                                        <span class="t_b t_box">板凳</span>
                                    {% elif forloop.revcounter == 3 %}
                                        <span class="t_c t_box">地板</span>
                                    {% else %}
                                        <span>{{ forloop.revcounter }}#</span>
								    {% endif %}
                                </div>
							</li>
                            {% endfor %}
						</ul>
					</div>
				</div>

			</div>
		</div>
		<div class="w380 fr">
			<!------------------公共盒子-------------------->
			<div class="public_box bg2">
				<div class="public_title">
					<div class="fl"><img src="{% static 'images/from_title_left.png' %}"/></div>
					<div class="con">
						<div class="lamp_ico"><img src="{% static 'images/lamp_ico.png' %}"/></div>
						<div class="name"><img src="{% static 'images/f_t_other_share.png' %}"/></div>
						<div class="more"><a href="note_list.html">更多>></a></div>
					</div>
					<div class="fr"><img src="{% static 'images/from_title_right.png' %}"/></div>
					<div class="clear"></div>
				</div>
				<!------------------最新游记-------------------->
				<div id="other_share">
					<ul>
                        {% for new_diary in new_diarys %}
                        <li>

							<div class="pic">
								<div class="cover"><a href="{% url 'diarys:details' new_diary.id %}"><img class="scale-effect " src="{{ MEDIA_URL }}{{ new_diary.image }}"/></a></div>
								<div class="head"><img src="{{ MEDIA_URL }}{{ new_diary.user.portrait }}"/></div>
							</div>
							<div class="meta">
								<p><a href="{% url 'diarys:details' new_diary.id %}">{{ new_diary.title }}</a></p>
								<span>作者：{{ new_diary.user.nickname }}。<label><img src="{% static 'images/state_icon1.png' %}"/>{{ new_diary.checknum }}</label><label><img src="{% static 'images/state_icon2.png' %}"/>{{ new_diary.commentsnum }}</label></span>
							</div>
						</li>
                        {% endfor %}
					</ul>
				</div>
			</div>
		</div>
		<div class="clear"></div>
    </div>
</div>
{% endblock %}